<script setup>
import {MdPreview} from "md-editor-v3";
import 'md-editor-v3/lib/style.css';
import {ref} from "vue";
const props = defineProps({
  title: {
    type: Object,
    required: true,
    default: () => ({})
  },
  onEdit: {
    type: Function,
    default: () => {}
  }
});
const editRequirements = ref('');
</script>

<template>
  <div class="result-right-content-item" v-if="title">
    <div class="result-right-content-item-title">{{title.title}}</div>
    <div class="result-right-content-item-requirements">编写要求: {{title.requirements}}</div>
    <div class="result-right-content-item-content">
      <md-preview v-model="title.content"/>
      <div class="ai-edit-message-box">
        <div class="ai-edit-label">AI编辑</div>
        <div class="ai-edit-input">
          <input type="text" v-model="editRequirements" placeholder='请输入编辑要求, 比如"扩写这段文案"' />
          <button class="ai-edit-button" @click="props.onEdit(props.title, editRequirements)">编辑</button>
        </div>
      </div>
    </div>
    <document-result-content :title="item" v-for="(item, index) in title.children" :key="index" :on-edit="props.onEdit"/>
  </div>
</template>

<style scoped lang="less">
.result-right-content-item{
  padding-left: 10px;

  &-title {
    font-size: 16px;
    font-weight: bold;
  }

  &-requirements {
    font-size: 14px;
    color: #666;
  }
  &-content {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  /deep/.default-theme {
    //table{
    //  margin: 0 auto;
    //}
    img.medium-zoom-image{
      display: block!important;
    }
  }
  .result-right-content-item-content{
    transition: all 0.3s ease;
    padding: 5px;
    border: solid 1px rgba(0, 123, 255, 0);
    border-radius: 5px;
    .ai-edit-message-box{
      height: 0;
      overflow: hidden;
      transition: height 0.3s ease;
      padding: 0;
      .ai-edit-label{
        padding: 0 5px;
      }
      .ai-edit-input{
        display: flex;
        align-items: center;
        padding: 5px;
        input{
          flex: 1;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 4px;
          margin-right: 5px;
          outline: none;
          &:focus{
            border-color: #007bff;
          }
        }
        button{
          background-color: #007bff;
          color: white;
          border: none;
          padding: 5px 10px;
          border-radius: 4px;
          cursor: pointer;
          &:hover{
            background-color: #0056b3;
          }
        }
      }
    }
    &:hover{
      border: solid 1px rgba(0, 123, 255, 1);
      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
      .ai-edit-message-box{
        height: 70px;
        overflow: visible;
        .ai-edit-label{
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
